<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple&code=G4QwTgBAGgJiAuIIF4IG0BQEIHIBMADHgKwC0BAbKQMwE4A0WuhJ5A7OQIwNP5FkEORHtj6tBpPBRHN-7SWxliBHPAA4lLFZICcmuRNo4MAXQDcGUJACacRCnScC1AHQAWehCeuCnp3hcKPyIXNWCA6mDOQOCCF05PHR1Q80twCGsAWwBLADsHAFkEAAsXADMAGwB7KrAACiL4Upzcupd22wQQAEpuiysMzJAAD0KSlwBjAFNsiobxoeG2jrsevowqgAd4bKr81ABvJmGAQWHsgGcALggj7Gx4AE9NqZucCYQpgHNax5lsVY3WBdJgAX0Y2EeZ0uNzQBwgeXgUzAoAqNwSEBaNyyeU8i2xiwgoJMEIgF2R2Sm13QTGwd3uAK62NWpIZTxebwqeSm_3uF0yNSaN3gYAArlNWfcKiAAEZTNG3WkMsnFKoAd2FYolSoZmyqF2yOz2b3gW2MyqJStBTBMGFBZiAA
	⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var data = [
        {
            "date": "2025-07-26",
            "weight": 102.8
        },
        {
            "date": "2025-07-27",
            "weight": 103.3
        },
        {
            "date": "2025-07-28",
            "weight": 101.6
        },
        {
            "date": "2025-07-29",
            "weight": 100.17
        },
        {
            "date": "2025-07-30",
            "weight": 100.00
        },
        {
            "date": "2025-07-31",
            "weight": 100.00
        },
        {
            "date": "2025-08-01",
            "weight": 99.8
        },
        {
            "date": "2025-08-02",
            "weight": 99.9
        },
        {
            "date": "2025-08-03",
            "weight": 100.1
        },
        {
            "date": "2025-08-04",
            "weight": 100.00
        },
        {
            "date": "2025-08-05",
            "weight": 100.6
        },
        {
            "date": "2025-08-06",
            "weight": 100.4
        },
        {
            "date": "2025-08-07",
            "weight": 100.4
        },
        {
            "date": "2025-08-08",
            "weight": 100.4
        },
        {
            "date": "2025-08-09",
            "weight": 100.4
        },
        {
            "date": "2025-08-10",
            "weight": 100.4
        },
        {
            "date": "2025-08-11",
            "weight": 100.8
        },
        {
            "date": "2025-08-12",
            "weight": 100.1
        }
    ];
    var allYdata = data.map(item => item.weight).filter(item => item !== null);
    var min = Math.min(...allYdata);
    var max = Math.max(...allYdata);
    var Ymin = Math.floor(Math.min(...allYdata) - 1);
    var Ymax = Math.ceil(Math.max(...allYdata));
    var Xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

    function toSeries() {
        var map = data.reduce((acc, item) => {
            const month = item.date.slice(0, 7);
            if (!acc[month]) {
                acc[month] = [];
            }
            acc[month].push(item);
            return acc;
        }, {});
        var series = [];

        for (var key in map) {
            series.push(
                {
                    name: key,
                    data: toXdata(map[key]),
                    symbolSize: 10,
                    type: 'line',
                    lineStyle: {
                        width: 4
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    endLabel: {
                        show: true,
                        formatter: '{a}',
                        color: "inherit",
                        align: "left",
                        // verticalAlign: "top",
                        // lineHeight: 26,

                    },
                    emphasis: {
                        focus: 'series'
                    },
                    connectNulls: true,
                    smooth: true,
                    // markPoint: {
                    //     data: [
                    //         {type: 'max', name: 'Max'},
                    //         {type: 'min', name: 'Min'}
                    //     ]
                    // },
                    markLine: {
                        show: true,
                        lineStyle: {
                            width: 2
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        symbol: ['none', 'none'],
                        data: markLineData(toXdata(map[key])),
                        label: {
                            show: true,
                            formatter: '{b}:{c}kg',
                            color: "inherit"
                        },
                        animation: false
                    }
                    // areaStyle: {},
                }
            );
        }
        return series;
    }

    function markLineData(data) {
        var arr = [];
        let filter = data.filter(item => item !== null);
        for (var i = 0; i < filter.length; i++) {
            if (filter[i] == max) {
                arr.push({type: 'max', name: 'Max'});
            }
            if (filter[i] == min) {
                arr.push({type: 'min', name: 'Min'});
            }
        }
        return arr;
    }

    function toXdata(monthData) {
        var d = {};
        var arr = [];
        for (var i = 0; i < monthData.length; i++) {
            d[parseInt(monthData[i].date.slice(8, 10))] = monthData[i].weight;
        }
        for (var i = 1; i <= 31; i++) {
            if (!d[i]) {
                arr.push(null);
            } else {
                arr.push(d[i]);
            }
        }
        return arr;
    }

    function formatterShow(prarm) {
        var date = '';
        for (var i = 0; i < prarm.length; i++) {
            var item = prarm[i]

            date += `${item.seriesName}-${item.name}:<span style="color: #007bff">${item.data == null ? "--" : item.data + "kg"}</span>${calculatedDifference(prarm, i)}</br>`
        }
        return date;
    }

    function calculatedDifference(prarm, index) {
        if (index == 0) {
            return ``;
        }
        let data1 = prarm[index].data;//本次
        let data2 = prarm[index - 1].data;//上一次

        if (index > 0 && data1 != null && data2 != null) {
            let difference = data1 - data2;
            let color = "green";
            let symbol = '↓';
            if (difference > 0) {
                color = "red";
                symbol = '↑';
            } else if (difference == 0) {
                color = "";
                symbol = '';
            }
            let str = `
            <span style="color: ${color}">(
                ${Math.abs(difference).toFixed(1)}${symbol}
            )</span>
            `;
            return str;
        }
        return ``;
    }

    var option = {
        notMerge: true,
        animation: false,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: formatterShow
        },
        legend: {
            data: Array.from(new Set(data.map(item => item.date.slice(0, 7)))),
            show: true,
            backgroundColor: "#ffffff",
            padding: 10,
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: true,
                lineStyle: {
                    // 使用深浅的间隔色
                    color: '#aaa'
                }
            },
            data: Xdata
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    // 使用深浅的间隔色
                    color: '#aaa'
                }
            },
            axisLabel: {
                margin: 30,
                fontSize: 16,
                formatter: '{value}kg'
            },
            interval: 1,
            min: Ymin,
            max: Ymax
        },
        series: toSeries(),
        // backgroundColor:"#100C2BFF"
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
